import type { transError } from '@/service/error';
import ConfirmButton from '../common/confirm-button';
import ImagePreview from '../common/image-preview';
import { Button } from '../ui/button';
import { Popover, PopoverContent, PopoverTrigger } from '../ui/popover';

export default function ImagePopover({
  imageKey,
  onDelete,
  children,
}: {
  imageKey: string;
  onDelete: () => Promise<{ error: ReturnType<typeof transError> | null }>;
  children: React.ReactNode;
}) {
  return (
    <Popover>
      <PopoverTrigger>{children}</PopoverTrigger>
      <PopoverContent className="flex gap-2 p-1 w-fit">
        <ImagePreview
          imageKey={imageKey}
          button={<Button variant="ghost">预览</Button>}
        />
        <ConfirmButton
          title="删除"
          description="确认删除吗？删除后无法取消"
          button={<Button variant="ghost">删除</Button>}
          onClick={onDelete}
        />
      </PopoverContent>
    </Popover>
  );
}
